import { addTodo, delTodo, todolist_list, finishTodo } from '@/redux/slice/todolist';
import { Input, Button } from 'antd';
import React, { useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { useDebounce } from 'ahooks';

//代办事项页面
const Todolist: React.FC = () => {
  const [text, setText] = useState<string>('');
  const todos = useSelector(todolist_list);
  const dispatch = useDispatch();
  const debouncedtext = useDebounce(text, { wait: 500 });
  //   console.log('todos', todos);

  const AddTodo = () => {
    dispatch(
      addTodo({
        id: Date.now(),
        text,
        completed: false,
      }),
    );
    setText('');
  };

  return (
    <>
      <div className="todolist">
        <Input
          placeholder="请输入内容"
          value={text}
          onChange={(e) => setText(e.target.value)}
        />
        <p>debouncedtext:{debouncedtext}</p>
        <button onClick={AddTodo}>AddTodo</button>
        {todos?.map((item: any) => {
          return (
            <div className="item" key={item.id}>
              <h1>{item.text}</h1>
              <div className="op">
                <Button onClick={() => dispatch(delTodo(item.id))}>删除</Button>
                {item.completed ? null : (
                  <Button onClick={() => dispatch(finishTodo(item.id))}>完成</Button>
                )}
              </div>
            </div>
          );
        })}
      </div>
    </>
  );
};

export default Todolist;
